<template>
  <div class="w h b-f box-b p10">
    <el-button type="primary" v-show="activeName=='0'" @click="moreTask()">新建多人任务</el-button>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="我创建的任务" name="0"> </el-tab-pane>
      <el-tab-pane label="我接受的任务" name="1"> </el-tab-pane>
    </el-tabs>
    <div class="w h box-b" style="height:calc(100% - 60px)">

      <owner-task v-show="isOwnerTask"></owner-task>
      <accept-task v-show="!isOwnerTask"></accept-task>

    </div>
  </div>
</template>

<script lang="ts">
import { ElIconRender, PageText } from '@/importComponents'
import { type TabsPaneContext } from 'element-plus'
import frameProperty from '@/mixins/frame-property'
import acceptTask from './acceptTask.vue'
import ownerTask from './ownerTask.vue'

export default {
  name: 'morePeopleManage',
   mixins: [frameProperty],
  components: { ElIconRender, PageText, acceptTask, ownerTask },
  data() {
    return {
      activeName: '0',
      current: 1,
      size: 100
    }
  },
  computed: {
    isOwnerTask() {
      return this.activeName == '0'
    },
    imageCollectionId() {
      return this.$route.params.projectId;
    }
  },
  methods: {
       moreTask() {
      this.dialogPagePush({ name: 'myTaskEdit',params:{type:'all'} });
    },
    handleClick(tab: TabsPaneContext, event: Event) { },
    handleSizeChange(val: number) {
      console.log(`${val} items per page`)
    },
    handleCurrentChange(val: number) {
      console.log(`current page: ${val}`)
    },
    getDataList() {
      // const params={
      //   current:this.current,
      //   id:this.imageCollectionId,
      //   size:this.size,
      //   state:this.isOwnerTask
      // };
    }

  },
  created() {
    this.getDataList();
  }
}
</script>

<style scoped lang="scss">
.left-statistics {
  width: 260px;
  height: 100%;
  flex-shrink: 0;

  .page-text {
    border-bottom: 1px solid var(--el-card-border-color);
  }
}

.right-box {
  display: flex;
  flex-grow: 1;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 2px;

  --box-size: 100px;

  .image-box {
    width: var(--box-size);
    height: calc(var(--box-size) + 0);
    margin: 8px;

    .image-info {
      background: #ececec;
      width: var(--box-size);
      height: calc(var(--box-size) - 30px);
      @extend .f-c, .a-i-c;
    }

    .image-text {
      height: 30px;
    }
  }
}
</style>